<template>
  <div class="Leaest_F">
    <ul class="title">
      <li v-for="(item,index) in title" :key="index" @click.prevent="change(index)"><a href="#">{{ item }}</a></li>
    </ul>
    <ul class="contBox">
      <li v-for="(item,i) in contentList" :key="i">
        <LeaestSon1 :items="item" :number="i" />
      </li>
    </ul>
  </div>
</template>

<script>
import LeaestSon1 from "@/views/home/leaest_cate/LeaestSon1";
export default {
  name: "LeaestFather",
  data(){
    return{
      bookQuery:{
        pageSize:6,
        sort:'sale'
      },
      title:['热销书'],
      index:0,
      contentList:[
        // [
        //   {no:1,imgurl:'http://www.jyxue.com.cn/images/201606/thumb_img/139_thumb_G_1465874070355.jpg',name:'升级版《中华经典素读》...',paynum:239},
        //   {no:2,imgurl:'http://www.jyxue.com.cn/images/201712/thumb_img/58_thumb_G_1512112391046.jpg',name:'升级版《中华经典素读2》...',paynum:239},
        //   {no:3,imgurl:'http://www.jyxue.com.cn/images/201601/thumb_img/297_thumb_G_1453439806916.jpg',name:'升级版《中华经典素读3》...',paynum:239},
        //   {no:4,imgurl:'http://www.jyxue.com.cn/images/201606/thumb_img/140_thumb_G_1465875568057.jpg',name:'升级版《中华经典素读4》...',paynum:239},
        //   {no:5,imgurl:'http://www.jyxue.com.cn/images/201601/thumb_img/306_thumb_G_1453450980869.jpg',name:'升级版《中华经典素读5》...',paynum:239},
        //   {no:6,imgurl:'http://www.jyxue.com.cn/images/201508/thumb_img/134_thumb_G_1440396914436.jpg',name:'升级版《中华经典素读6》...',paynum:239},
        //   {no:7,imgurl:'http://www.jyxue.com.cn/images/202005/thumb_img/303_thumb_G_1589792593206.jpg',name:'升级版《中华经典素读7》...',paynum:239},
        //   {no:8,imgurl:'http://www.jyxue.com.cn/images/no_picture.gif',name:'升级版《中华经典素读7》...',paynum:239},
        // ],
      ]
    }
  },
  methods:{
    change(i){
      console.log(i)
      this.index = i
      console.log()
    }
  },
  components:{
    LeaestSon1
  },
  created() {
    this.getRequest('/p/pms/book/customList',this.bookQuery).then((resp)=>{
      console.log(resp.data.list)
      this.contentList = resp.data.list
    })
  }
}
</script>

<style>
.Leaest_F{
  position: absolute;
  left: 45em;
  top: 60em;
  background-color: white;
}
.title{
  width: 420px;
  height: 40px;
  border: solid 1px lightgray;
}
.title li{
  float: left;
  /*height: 42px;*/
  /*line-height: 42px;*/
  line-height: 42px;
  margin-left: 12em;
}
.contBox{
  width: 420px;
  height: 694px;
  border-left: solid 1px lightgray;
  border-right: solid 1px lightgray;
  border-bottom: solid 1px lightgray;
}
.contBox li{
  float: left;
  width: 10em;
  margin-right: 3em;
  margin-top: 12px;
}
.contBox img{
  width: 120px;
  height: 128px;
}
</style>